<template>
  <qc-query-form :query-column="queryColumns" :query-param="queryParam" @search="search"></qc-query-form>
  <div class="mt16">
    <qc-page-table
      ref="dataSourcePageTableRef"
      :columns="columns"
      :loadData="loadData"
      :rowKey="(record) => record[primaryKey]"
    >
      <template #toolbarTitle>
        {{ t('org.data-source.dataSourceTableTitle') }}
      </template>
      <template #toolbarButton>
        <qc-add-button @click="addButtonClick"></qc-add-button>
        <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      </template>
      <template #customDataSourceCode="{ text, record }">
        <qc-link :url="dataSourceEditUrl + record[primaryKey]">
          {{ text }}
        </qc-link>
      </template>
      <template #customStatus="{ text }">
        <a-tag v-if="text === true" color="#87d068">
          {{ t('org.role.effective') }}
        </a-tag>
        <a-tag v-else color="#f50">
          {{ t('org.role.invalid') }}
        </a-tag>
      </template>
    </qc-page-table>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import dataSourceApi from '/@/api/org/data-source'
import { dataSourceTableColumns, dataSourceQueryColumns, dataSourceAddPageUrl, dataSourceEditUrl } from '../interface'
import { useModelPageTable } from '/@/kit/model-kit'
export default defineComponent({
  name: 'DataSourceList',
  setup(props) {
    const { t } = useI18n()
    const router = useRouter()
    const dataSourcePageTableRef = ref()
    const queryParam = {}
    const { primaryKey, searchTable, reloadTable, loadData, deleteSelectData } = useModelPageTable(
      dataSourcePageTableRef,
      dataSourceApi,
      queryParam
    )
    const dataSourceState = reactive({
      dataSourceEditUrl,
      columns: dataSourceTableColumns,
      primaryKey,
      search: () => reloadTable(),
      queryColumns: dataSourceQueryColumns,
      queryParam,
      loadData,
      addButtonClick: () => router.push({ path: dataSourceAddPageUrl }),
      deleteButtonClick: () => deleteSelectData(),
    })
    onMounted(() => searchTable())
    return {
      t,
      ...toRefs(dataSourceState),
      dataSourcePageTableRef,
      searchTable,
    }
  },
})
</script>